<template>
  <div>
    <!-- 右侧内容交互区域 -->
    <div v-if="index == 0" class="layouBox">
      <div class="layout_right_box">
        <!-- 内容显示项 -->
        <Layoutheader />
        <div class="layout_right_textcontent" ref="detailsbox">
          <div class=".margin-b" style="margin-bottom: 1.6vh">
            <!-- router-link容器结束 -->
            <span class="circuitbtn" @click="index = 1">创建线路</span>
          </div>
          <!-- 筛选表单 -->
          <div id="el-table">
            <el-table :data="tableData" height="59.64vh" style="width: 97%">
              <el-table-column
                label="线路名"
                style="overflow: hidden"
                width="270"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.route_title }}</span>
                </template>
              </el-table-column>
              <el-table-column label="目的地" width="160">
                <template slot-scope="scope">
                  <span>{{ scope.row.destination }}</span>
                </template>
              </el-table-column>
              <el-table-column label="售价(元)" width="130">
                <template slot-scope="scope">
                  <span>{{ scope.row.agency_price | tabelCur }}</span>
                </template>
              </el-table-column>
              <el-table-column label="状态" width="150">
                <template slot-scope="scope">
                  <span>{{ scope.row.status_text }}</span>
                </template>
              </el-table-column>
              <el-table-column label="含默认导游" width="120">
                <template slot-scope="scope">
                  <span>{{
                    scope.row.is_has_default_guide == 0 ? "是" : "否"
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="第三方导游合作" width="170">
                <template slot-scope="scope">
                  <span>{{ scope.row.allow_other_guide_amount }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <span
                    class="green"
                    v-if="scope.row.status == 2 || scope.row.status == 3"
                    @click="goDetails(scope.row)"
                    >详情</span
                  >
                  <span
                    class="green"
                    v-if="scope.row.status == 2"
                    @click="
                      ($refs.detailsbox.style.filter = 'blur(2px)'),
                        (putaway = true),
                        (submit = true),
                        (id = scope.row)
                    "
                    >上架</span
                  >
                  <span
                    class="green"
                    v-if="scope.row.status == 3"
                    @click="
                      ($refs.detailsbox.style.filter = 'blur(2px)'),
                        (soldout = true),
                        (submit = true),
                        (id = scope.row)
                    "
                    >下架</span
                  >
                  <span
                    class="green"
                    v-if="scope.row.status == 2 || scope.row.status == 3"
                    @click="
                      ($refs.detailsbox.style.filter = 'blur(2px)'),
                        (showGuide = true),
                        (submit = true),
                        (id = scope.row)
                    "
                    >导游设置</span
                  >
                  <span class="green" v-if="scope.row.status == 1">--</span>
                  <span class="green" v-if="scope.row.status == 4">编辑</span>
                  <span
                    class="green"
                    @click="deleteEle(scope.row.route_service_id)"
                    v-if="scope.row.status == 4 || scope.row.status == 2"
                    >删除</span
                  >
                </template>
              </el-table-column>
            </el-table>
            <div style="margin-top: 3vh">
              <el-pagination
                background
                hide-on-single-page
                @current-change="currentChange"
                layout="prev, pager, next"
                :total="total_count"
                :current-page="pagedata.page_no"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 发布线路 -->
    <SetCircuit
      :index="index"
      v-on:indexChange="indexchange($event)"
      v-if="index == 1"
    />

    <!-- 线路编辑 -->
    <div></div>

    <!-- 导游设置 -->
    <div v-show="showGuide" class="absolute upbox">
      <h6>导游设置</h6>
      <span
        id="wrong"
        @click="
          ($refs.detailsbox.style.filter = 'blur(0px)'),
            (showGuide = false),
            (submit = false)
        "
        >×</span
      >
      <div>
        <div>
          <span>是否自由行:</span>
          <div>
            <input type="text" />
          </div>
        </div>

        <span>自由行线路旅社不提供导游服务</span>

        <div>
          <span>开放第三方导游跟团:</span>
          <el-switch
            style="border: none"
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </div>
        <div>
          <span>第三方导游成本:</span>
          <div>
            <input type="text" />
            <span>元/人</span>
          </div>
        </div>
        <div>
          <span>第三方导游服务费:</span>
          <div>
            <input type="text" maxlength="13" />
            <span>元/人</span>
          </div>
        </div>
        <div><span class="button">提交</span></div>
      </div>
    </div>

    <!-- 确定上架 -->

    <div v-show="putaway" class="absolute upputaway">
      <p class="abs_text">确认上架</p>
      <div class="checkbox">
        <span
          @click="
            ($refs.detailsbox.style.filter = 'blur(0px)'),
              (putaway = false),
              (submit = false)
          "
          >取消</span
        >
        <span
          v-if="putaway"
          @click="
            ($refs.detailsbox.style.filter = 'blur(0px)'),
              (putaway = false),
              (submit = false),
              putawayPost(id)
          "
          >确认</span
        >
      </div>
    </div>

    <!-- 确定下架 -->
    <div v-show="soldout" class="absolute upputaway">
      <p class="abs_text">确认下架</p>
      <div class="checkbox">
        <span
          @click="
            ($refs.detailsbox.style.filter = 'blur(0px)'),
              (soldout = false),
              (submit = false)
          "
          >取消</span
        >
        <span
          @click="
            ($refs.detailsbox.style.filter = 'blur(0px)'),
              (soldout = false),
              (submit = false),
              upsoldoutPost(id)
          "
          >确认</span
        >
      </div>
    </div>

    <!-- 背景遮蔽层 -->
    <div v-show="submit" class="background-block"></div>
  </div>
</template>

<script>
import Layoutheader from "@/components/Layoutheader.vue";
import SetCircuit from "@/components/SetCircuit.vue";
import { getCircuitList } from "@/utils/method.js";
import detailsMethod from "@/mixins/circuit/circuit_details";
import circuitup from "@/mixins/circuit/circuit_up.js";

export default {
  components: { Layoutheader, SetCircuit },
  mixins: [detailsMethod, circuitup],
  beforeMount() {
    this.total_count = (this.total_count % this.pagedata.page_size) * 10;

    getCircuitList(this.pagedata)
      .then((res) => {
        this.tableData = res.data.data.data;
        this.total_count = res.data.data.total_count;
        // console.log(res.data.data);
      })
      .catch((error) => {
        console.log(error);
        this.$message.error(error.data.msg);
      });
  },
  data() {
    return {
      // 弹窗处理
      showGuide: false, // 导游设置
      submit: false, // 背景遮蔽
      putaway: false, // 上架
      soldout: false, // 下架
      id: "",
      options: [],
      // 请求页面的参数
      total_count: 0, // 多少个按钮
      pagedata: {
        page_no: 1,
        page_size: 10,
      },
      index: 0,
      value: "未通过",
      tableData: [],
    };
  },
  methods: {
    resetDateFilter() {
      // this.$refs.filterTable.clearFilter("date");
      console.log("色织");
    },
    clearFilter() {
      console.log("可恶");
      // this.$refs.filterTable.clearFilter();
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
};
</script>

<style lang="less">
.btn {
  cursor: pointer;
  font-size: 14px;
  display: inline-block;
  line-height: 4.4vh;
  padding: 0 1.6vw;
  margin-left: 1.2vw;
}
.success {
  border: 1px solid #07c160;
  color: #07c160;
  box-sizing: border-box;
  border-radius: 4px;
}
.default {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.45098039215686275);
  opacity: 1;
  color: #666666;
  border-radius: 4px;
}
.notabel {
  padding: 2vh;
  color: #999;
  border-radius: 6px;
  background-color: #ffffff;
}
.layout_right_box {
  margin-top: 5vh;
  width: 91vw;
  height: 95vh;
  box-sizing: border-box;
  .layout_right_top {
    padding: 1vh 2vh;
    box-sizing: border-box;
    height: 14vh;
    background: #ffffff;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.16);
    opacity: 1;
    .title {
      text-align: left;
      font-weight: 550s;
      line-height: 5vh;
    }
    .input_box {
      padding: 2.2vh 0;
      border-top: 1px solid #f3f3f3;
      display: flex;
      & > div {
        margin-right: 1.2vw;
        display: flex;
        // justify-content: center;
        align-items: center;
        .circuit {
          outline: none;
          width: 15vw;
          padding: 0 10px;
          border: 1px solid #ccc;
        }
        .el-select {
          .el-input {
            width: 12vw;
          }
        }
      }
    }
    *&div {
      margin-right: 1vw;
    }
    input {
      height: 4.4vh;
      line-height: 4.4;
      border-radius: 5px;
    }
  }
}
.el-select {
  line-height: 4.4vh;
  .el-input__inner {
    height: 4.4vh;
    line-height: 4.4vh;
  }
}

// 内容显示项
.layout_right_textcontent {
  height: 100%;
  // 底部边距
  .margin-b {
    margin-bottom: 2vh;
  }
  margin-top: 4px;
  padding: 2vh;
  background-color: #f1f4f6;
  .el-table thead {
    background-color: #000;
  }
  & > div:first-child {
    text-align: left;
  }
}
.el-table td,
.el-table th {
  padding: 1.8vh 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;

  text-align: left;
  .green {
    cursor: pointer;
    padding: 0.6vh 0;
    user-select: none;
    color: #07c160;
    margin: 0 1vw;
  }
}

// #el-table {
//   height: 40vh;
//   overflow: auto;
// }
// 含有element的select{}
</style>